<!DOCTYPE html>
<html>
<head>
	<title>Bank System</title>
	<style>
		body {
			font-family: Arial, sans-serif;
			background-color: #f5f5f5;
		}
		form {
			background-color: #fff;
			border: 1px solid #ccc;
			padding: 20px;
			margin: 20px auto;
			max-width: 600px;
		}
		label {
			display: block;
			margin-bottom: 10px;
		}
		input[type="text"], input[type="number"] {
			width: 100%;
			padding: 10px;
			border: 1px solid #ccc;
			border-radius: 4px;
			box-sizing: border-box;
			margin-bottom: 20px;
		}
		input[type="submit"] {
			background-color: #4CAF50;
			color: #fff;
			padding: 10px 20px;
			border: none;
			border-radius: 4px;
			cursor: pointer;
			margin-bottom: 9px;
		}
		input[type="submit"]:hover {
			background-color: #3e8e41;
		}
		.result {
			margin-top: 20px;
			padding: 10px;
			border: 1px solid #ccc;
			border-radius: 4px;
			background-color: #fff;
		}
	</style>
</head>
<body>
	<form>
		<h1>Bank System</h1>
		<input type="text" id="new_card_number" name="new_card_number" placeholder="new card number" readonly>
		<input type="text" id="new_password" name="new_password" placeholder="new password" readonly>

		<input type="submit" value="Open account" onclick="openAccount()">
		
		<input type="text" id="accnt_num" name="accnt_num" placeholder="Please enter the account card number to be deleted:">
		<input type="submit" value="Delete account" onclick="deleteAccount()">
		
		<input type="text" id="balance" name="balance" placeholder="Balance" readonly>
		<input type="submit" value="Check balance" onclick="checkBalance()">
		

		
		<label for="dest_accnt">Destination account:</label>
		<input type="text" id="dest_accnt" name="dest_accnt" placeholder="Please enter the destination account number:">
		
		<label for="amnt">Amount:</label>
		<input type="number" id="amnt" name="amnt" placeholder="Please enter the amount:">
		<input type="submit" value="Transfer" onclick="transfer()">
	</form>
	<script>
		// 开户
		function openAccount() {
			event.preventDefault();
			var xhr = new XMLHttpRequest();
			xhr.open("POST", "/open", true);
			xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
			xhr.onreadystatechange = function() {
				if (xhr.readyState == 4 && xhr.status == 200) {
					var response = JSON.parse(xhr.response)
					// 开户成功
					if (response.status == 0) {
						document.getElementById("new_card_number").value = response.card_number
						document.getElementById("new_password").value = response.password
						window.confirm(`开户成功！\n新账户的卡号为: ${response.card_number}\n 密码为: ${response.password}`)
					}
					else{
						window.confirm(`开户失败！您不是管理员用户！`)
					}
				}
			};
			xhr.send("token=" + localStorage.getItem("token"));
			return false;
		}

		// 删户
		function deleteAccount() {
			event.preventDefault();
			var accnt_num = document.getElementById("accnt_num").value;

			// TODO：前端输入验证

			var xhr = new XMLHttpRequest();
			xhr.open("POST", "/delete", true);
			xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
			xhr.onreadystatechange = function() {
				if (xhr.readyState == 4 && xhr.status == 200) {
					var response = JSON.parse(xhr.response)
					if(response.status == 0){
						window.confirm(`账户${accnt_num}删除成功！`)
					}
					else {
						// TODO: 如何区分两种情况
						window.confirm(`权限不足或没找到对应的账户！`)
					}
				}
			};
			xhr.send(`token=${localStorage.getItem("token")}&card_number=${accnt_num}`);
			return false;
		}

		// 查询余额
		function checkBalance() {
			event.preventDefault();
			var xhr = new XMLHttpRequest();
			xhr.open("POST", "/balance", true);
			xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
			xhr.onreadystatechange = function() { 
				if (xhr.readyState == 4 && xhr.status == 200) {
					var response = JSON.parse(xhr.response)
					console.log(response)
					if(response.status == 0){
						document.getElementById("balance").value = "balance: " +  response.balance;
					}
					else{
						// TODO:区分失败原因并回显
						document.getElementById("balance").value = "查询失败！";
					}
				}
			};
			xhr.send("token=" + localStorage.getItem("token"));
			return false;
		}

		// 转账
		function transfer() {
			event.preventDefault();
			var dest_accnt = document.getElementById("dest_accnt").value;
			var amnt = document.getElementById("amnt").value;

			// TODO：前端输入验证

			var xhr = new XMLHttpRequest();
			xhr.open("POST", "/transfer", true);
			xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
			xhr.onreadystatechange = function() {
				if (xhr.readyState == 4 && xhr.status == 200) {
					var response = JSON.parse(xhr.response)
					if(response.status == 0){
						window.confirm("转账成功！")
					}
					else{
						window.confirm(response.message)
					}
				}
			};
			xhr.send("token=" + localStorage.getItem("token") + "&to=" + dest_accnt + "&amount=" + amnt);
			return false;
		}
		// TODO: 我们希望在未登陆（没有token信息）的时候访问当前页面时应当重定向到登陆页面，先完成登陆操作，请修改
		console.log(localStorage.getItem("token"))
	</script>
</body>
</html>